.body {
  padding: 20px;
  background-color: #59b2db;
}
.topBox .outRun {
  color: #aad9f7;
  font-size: 16px;
  margin-bottom: 5px;
}
.topBox .topTxt .running {
  color: #ffffff;
  font-size: 24px;
}
.topBox .topTxt .iconfont {
  margin-left: 20px;
  color: white;
  font-size: 30px;
}
.kilbox {
  margin-top: 50px;
  margin-bottom: 60px;
  color: white;
}
.kilbox .kilNum {
  font-size: 100px;
}
.kilbox .kilT {
  font-size: 20px;
  margin-top: 40px;
}
.GPS {
  margin-bottom: 40px;
}
.GPS .GPSText {
  color: #acdfff;
  font-size: 14px;
}
.GPS .line {
  top: 418px;
  width: 106px;
  height: 2px;
  background-color: white;
  opacity: 0.5;
}
.GPS .iconfont {
  color: white;
  font-size: 45px;
}
.timeBox {
  margin-bottom: 55px;
}
.timeBox .iconfont {
  color: white;
  font-size: 50px;
  margin-bottom: 13px;
}
.timeBox p {
  color: #aad9f7;
  font-size: 16px;
  margin-bottom: 10px;
}
.timeBox .comNum {
  font-size: 20px;
  color: white;
}
.pause {
  position: relative;
  margin-bottom: 15px;
  width: 100%;
  height: 120px;
}
.pause .pauseBtn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #fff;
}
.pause .pauseBtn .icon-stop {
  color: #59b2db;
  font-size: 40px;
  margin-bottom: 5px;
}
.pause .pauseBtn p {
  color: #1592cc;
  font-size: 16px;
}
.pause .icon-suoding {
  margin-right: 37px;
  font-size: 50px;
  color: #fff;
}
.maskbtn {
  width: 289px;
  min-height: 50px;
}
.b {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
}
.b i {
  font-size: 30px;
  margin: 10px;
}
.b p {
  font-size: 16px;
}
.continue1 {
  background-color: #79f0c2;
}
.end {
  background-color: #FF6060;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #1592cc;
  opacity: 0.8;
}
.maskbtn {
  width: 100%;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  display: none;
  padding: 0 30px;
}
